<template>
	<view class="">
		<view class="item-title" v-if="title">{{title}}</view>
		<swiper class="swiper" style=" height: 210px;" :indicator-dots="indicatorDots" autoplay="autoplay"
			:interval="interval" :duration="duration" circular indicator-color="rgba(255,255,255,0.2)"
			indicator-active-color="rgba(255,255,255,0.7)">
			<swiper-item class="swiper-item" v-for="ban in list" :key="ban.bannerid">
				<cover-image style="width: 100vw;" :src="ban.image" mode="widthFix"></cover-image>
				<view class="info">
					<text class="text">专题</text>
					<view class="info-title">{{ban.title}}</view>
					<view class="info-p">{{ban.app_fu_title}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "banner",
		props: {
			title: String,
			list: Array,
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
			};
		}
	}
</script>

<style lang="less">
	.item-title {
		background-color: black;
		color: white;
		text-align: center;
		line-height: 100rpx;
	}

	.swiper-item {
		position: relative;

		.info {
			position: absolute;
			left: 3vw;
			bottom: 3vw;
			color: white;
			font-size: 24rpx;
			.text{
				border-bottom: 1px solid white;
				line-height: 60rpx;
				display: block;
				width: 75rpx;
			}
			.info-title{
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
			}
		}
	}
</style>
